import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Button, message } from 'antd';
import { useRequest } from '@umijs/hooks';
import router from 'umi/router';
import React, { useEffect, useState } from 'react';
import { isAccident } from '../service'

const AccidentNumber = props => {
  const { form } = props;

  // 表单格式
  const layout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 19,
    },
  };

  // 是否存在事故单接口
  const { run: isAccidentR } = useRequest((params) => isAccident(params), {
    manual: true,
    onSuccess: (data, params) => {
      if (data === true) {
        router.push({
          pathname: '/banksearchSystem/inPortBaggageManagement/accidentDetail',
          state: {
            ownerType: 2,
            accidentId: params[0].accidentId
          }
        });
      } else {
        message.warning('请输入正确事故单号')
      }
    }
  })

  // 事故单号规则
  const accidentNumberValidator = (rule, value, callback) => {
    if (!value) {
      callback("请输入事故单号");
    } else if (value && (value.length != 17 || (value.slice(0, 3) !== 'DMG' && value.slice(0, 3) !== 'AHL' && value.slice(0, 3) !== 'OHD' && value.slice(0, 3) !== 'LOS' && value.slice(0, 3) !== 'EXP')) || !(/^[0-9]*[1-9][0-9]*$/).test(value.slice(3, value.length - 1))) {
      callback("请输入正确的事故单号");
    }
    callback();
  }

  // 确认
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      isAccidentR({ accidentId: fieldsValue.accidentNumber })

    });
  };


  return (
    <Form
      {...layout}
      name="basic"
      style={{ border: '1px solid #eee', padding: '20px 30px 0' }}
      labelAlign='left'
    >
      <Form.Item
        label="事故单号"
      >
        {form.getFieldDecorator('accidentNumber', {
          rules: [
            {
              validator: accidentNumberValidator,
            }
          ],
        })(<Input placeholder='请输入' maxLength={17} />)}
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={() => okHandle()}>
          单据快速检索
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Form.create()(AccidentNumber);
